<template>
  <div class="storeList-model-container">
    <div class="store-list-title-container flex-between">
      <div class="title-content flex-center">
        <span class="title-txt">商家列表（{{shopList.length}}家）</span>
      </div>
      <div class="search-content flex-center">
        <!-- <el-select v-model="searchProp.text" filterable
          remote reserve-keyword placeholder="请输入关键词" @change="marksMap"
          :remote-method="remoteMethod" :loading="searchProp.loading">
          <el-option
            v-for="item in searchProp.options"
            :key="item.id"
            :label="item.shopName"
            :value="item.id">
            <div class="option-content">
              <span class="option-label">{{ item.shopName }}</span>
              <span class="option-desc">{{ item.shopAddress }}</span>
            </div>
          </el-option>
        </el-select> -->
        <el-input v-model="searchProp.text" filterable
          remote reserve-keyword placeholder="请输入关键词"
          @input="remoteMethod">
        </el-input>
      </div>
    </div>
    <el-scrollbar class="store-list-main">
      <div :class="['item flex-between', item.isChecked && 'active']"
        v-for="item in searchProp.options" :key="item.id">
        <div class="item-content flex-normal">
          <span class="item-label ellipsis-1">{{item.shopName}}</span>
          <span class="item-desc ellipsis-1">{{item.shopAddress}}</span>
        </div>
        <div :class="['item-action flex-normal', item.isChecked && 'active']"
          @click="actionItem(item)">
          <span class="action-icon car-common-icon">&#xe663;</span>
          <span class="action-txt">选择</span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
// suitShopIds
export default {
  name: 'storeListModel',
  props: {
    shopList: {
      type: Array,
      default: []
    },
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    value: {
      handler: function (str) {
        if(!str || str == '') return
        let arr = str.split(',')
        this.shopList.forEach(item => {
          let boo = arr.includes(`${item.id}`)
          this.$set(item, 'isChecked', boo)
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      searchProp: {
        loading: false,
        autoComplete: null, //搜索对象
        text: this.val,
        options: []
      }, 
    }
  },
  mounted(){
    let _self = this
    _self.searchProp.options = _self.shopList
  },
  methods: {    
    // 搜索
    remoteMethod(query) {
      let _self = this
      if (query !== '') {
        _self.searchProp.options = _self.shopList.filter(item => {
          let {shopName} = item
          return shopName && shopName.indexOf(query) > -1;
        });
      } else {
        _self.searchProp.options = _self.shopList;
      }
    },
    actionItem(item){
      let _self = this
      _self.$set(item, 'isChecked', !item.isChecked)
      let arr =  _self.searchProp.options.filter(i => i.isChecked).map(i => i.id)
      _self.$emit('input', arr.join(','))
    },
  }
}
</script>

<style lang="scss" scoped>
.storeList-model-container::v-deep{
  user-select: none;
  line-height: normal;
  flex: 1;
  .option-content{
    .option-label{
      font-size: vh(13); 
      color: #333;
    }
    .option-desc{
      font-size: vh(12); 
      color: #999;
      padding-left: vw(10);
    }
  }
  .store-list-title-container{
    .title-content{
      height: vh(40);
      .title-txt{
        color: #3D3D3D;
        font-size: 13px;
      }
    }
    .search-content{
      background: rgba(237, 237, 237, 0.4);
      border-radius: vh(3);
      .el-input--medium .el-input__inner{
        height: vh(36);
        line-height: vh(36);
      }
      .el-input__inner{
        border: none;
        background-color: transparent;
      }
    }
  }
  .store-list-main{
    border: 1px solid #DDDDDD;
    border-radius: vh(3);
    padding: vh(13) vw(12);
    overflow: hidden;
    height: vh(300);
    margin-top: vh(10);
    .item-action{
      cursor: pointer;
      transition: .2s;
      &.active{
        .action-txt, .action-icon{
          color: #0003AA;
        }
      }
      .action-icon{
        color: #666666;
      }
      .action-txt{
        color: #3E3E3E;
        font-size: 13px;
        margin-left: vw(10);
      }
    }
    .item{
      padding-right: vw(25);
      margin-bottom: vh(15);
      .item-content{
        color: #666666;
        width: 70%;
        .item-label{
          width: 40%;
          margin-right: vw(20);
          font-size: 13px;
        }
        .item-desc{
          flex: 1;
          font-size: 13px;
        }
      }
      .item-btn{
        color: #767676;
        cursor: pointer;
      }
    }
  }
}
</style>
